<script lang="ts" setup>
// @ts-ignore
import {getArticleById} from "~/server/article.service";
// @ts-ignore
import {articleUtil} from "~/utils/ArticleUtil";
// @ts-ignore
import markdownToHtml from "~/utils/markdown";
// @ts-ignore
import {getComments} from "~/server/comment.service";
// @ts-ignore
import emitter from "~/utils/mitt";

//在每个页面上覆盖布局
definePageMeta({
    layout: false,
})
const route = useRoute()
const article = ref({} as any)
const articleContent = ref('' as  any)
const wordNum = ref(0)
const readTime = ref(0)
const pageInfo = reactive({
    current: 1,
    size: 7
})
const articleComments = ref('' as any)
const articleCommentsCount = ref(0)
// 缓存评论发布类型
const commentStore = useCommentStore()
commentStore.type = 1

emitter.on('articleFetchComment', () => {
    pageInfo.current = 1
    getArticleComments()
})
emitter.on('articleFetchReplies',async () => {
    await getArticleComments()
})
function getArticleInfo() {
    getArticleById(route.params.id).then(({data}: any) => {
        if (data.data === null) {
            route.push({path: '/404'})
        }
        if (data.code === 52003) {
            ElMessage({message: '文章密码认证未通过', type: 'error'})
            return
        }
        articleUtil.postType(data.data.postType)
        article.value = data.data
        new Promise((resolve) => {
            articleContent.value = markdownToHtml(String(data.data.articleContent))
            resolve(data.data)
        }).then((article: any) => {
            wordNum.value = Math.round(deleteHTMLTag(String(article.articleContent)).length)
            readTime.value = Math.round(deleteHTMLTag(String(article.articleContent)).length / 200)
            nextTick(() => {
                animateDelayedElements('.entry-meta-left', 'div', 0.7)
                articleUtil.createToc()
            })
        })
    })
}
function getArticleComments() {
    const params = {
        type: 1,
        topicId: route.params.id,
        current: pageInfo.current,
        size: pageInfo.size
    }
    getComments(params).then(({data}: any) => {
        articleComments.value = data.data.records
        articleCommentsCount.value = data.data.count
    })
}
onBeforeMount( async ()=>{
    await getArticleInfo()
})
onMounted( () => {
    getArticleComments()
})
</script>
<template>
    <NuxtLayout name="article">
        <template v-slot:nav>
            <Nav :title="article.articleTitle"/>
        </template>
        <template v-slot:header>
            <SiteHeader
                    :article="article"
                    :img-url="'/static/img/gd.jpg'"
                    :word-num="wordNum"
                    :read-time="readTime"/>
        </template>
        <template v-slot:content>
            <div class="entry-content" v-html="articleContent"/>
        </template>
        <template v-slot:aside-area>
            <AsideArea :info="article">
                <template v-slot:aside-comment>
                    <Commet :comment-list="articleComments" :count="articleCommentsCount"/>
                </template>
            </AsideArea>
        </template>
    </NuxtLayout>
</template>
<style scoped>

</style>
